<template>
	<!-- 支付成功 -->
	<view>
		<c-navBar title="支付成功" isTran isPerch></c-navBar>
		<view class="pa-bg"></view>

		<view class="top">
			<image :src="require('../static/gous.png')" mode=""></image>
			<view class="success">支付成功</view>
			<view class="price">-￥{{ price }}</view>
			<view class="seconds">{{num}}s后自动返回</view>
			<view class="back" @click="skipHome">返回</view>
			<view class="look" @click="skipOrder">查看订单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 3,
			timer: null,
			price: 0,
		};
	},
	onLoad(e) {
		if (e.price) {
			this.price = e.price;
		}
		this.countdown();
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		countdown() {
			this.timer = setInterval(() => {
				this.num--;
				if (this.num <= 0) {
					clearInterval(this.timer)
					uni.reLaunch({
						url: '/pages/tabbar/home'
					})
					return
				}
			}, 1000)
		},
		// 返回首页
		skipHome() {
			uni.reLaunch({
				url: '/pages/tabbar/home'
			});
		},
		// 去订单页面
		skipOrder() {
			uni.reLaunch({
				url: '/pages/order/pages/myOrder?type=-1'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pa-bg {
	width: 750rpx;
	height: 320rpx;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

.top {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50rpx;
	color: #666;
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);

	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.success {
		font-size: 36rpx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.price {
		margin-top: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.seconds {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 40rpx;
	}

	.back {
		width: 400rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
		border-radius: 16rpx;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 86rpx;
		text-align: center;
		margin: 40rpx 0 28rpx;
	}

	.look {
		font-size: 28rpx;
		color: #666666;
	}
}
</style>
